<template>
  <div class="forgetForm">
    <div class="btitle">找回密码</div>
    <el-form
      v-show="!isChecked"
      :model="forgetForm"
      :rules="rules"
      ref="forgetForm"
      class="demo-ruleForm"
    >
      <el-form-item prop="userEmail">
        <el-input
          clearable
          v-model="forgetForm.userEmail"
          autocomplete="off"
          placeholder="请输入邮箱"
          :disabled="isSend"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          clearable
          class="captcha"
          v-model="forgetForm.captcha"
          autocomplete="off"
          placeholder="验证码"
          :disabled="!isSend"
        ></el-input>

        <el-button
          type="primary"
          class="send"
          :disabled="isTiemCount !== 60"
          @click="sendEmailChar('forgetForm')"
          >{{ msg }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="verify"
          @click="submitForm"
          @keyup.enter="submitForm"
          v-show="isSend"
          >验 证</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 重置密码 -->
    <find-form v-show="isChecked" :email="forgetForm.userEmail" />
  </div>
</template>
<script>
import FindForm from "@/components/FindForm";
export default {
  components: { FindForm },
  data() {
    var checkEmail = (rule, value, callback) => {
      if (!value || value == "") {
        return callback(new Error("邮箱不能为空"));
      }
      callback();
    };
    var checkCaptcha = (rule, value, callback) => {
      if (!value || value == "") {
        return callback(new Error("请填写验证码！"));
      }
      callback();
    };
    return {
      msg: "Send",
      // 控制验证按钮显示
      isSend: false,
      // 60s 倒计时
      isTiemCount: 60,
      // 重复执行函数标识，不为空则不再执行
      myInterval: null,
      // 检查是否校验成功
      isChecked: false,
      forgetForm: {
        userEmail: "",
        captcha: "",
      },
      rules: {
        userEmail: [{ validator: checkEmail, trigger: "blur" }],
      },
    };
  },
  methods: {
    countDown() {
      if (this.myInterval) {
        return;
      }
      this.myInterval = setInterval(() => {
        if (this.isTiemCount > 1) {
          this.isTiemCount--;
          this.msg = this.isTiemCount + " s";
        } else {
          this.isTiemCount = 60;
          this.msg = "Send";
          clearInterval(this.myInterval);
          this.$router.go(0);
        }
      }, 1000);
    },
    sendEmailChar(forgetForm) {
      this.$refs[forgetForm].validate((valid) => {
        if (valid) {
          this.countDown();
          //   请求发送验证码
          this.$axios({
            url: "/user/sendCaptcha",
            params: {
              email: this.forgetForm.userEmail,
            },
          })
            .then((res) => {
              console.log(res.data);
              if (res.data.status == 200) {
                this.$message.success(res.data.msg);
                this.isSend = !this.isSend;
              }
            })
            .catch(() => {
              this.$message.error("服务器请求失败！");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm() {
      if (this.forgetForm.captcha == "" || this.forgetForm.captcha == null) {
        return this.$message.warning("请输入验证码！");
      }
      this.$axios({
        url: "/user/checkCaptcha",
        params: {
          captcha: this.forgetForm.captcha,
        },
      })
        .then((res) => {
          console.log(res.data);
          if (res.data.status == 200) {
            this.$message.success(res.data.msg);
            setTimeout(() => {
              this.isChecked = !this.isChecked;
            }, 2000);
          }
        })
        .catch(() => {
          this.$message.error("服务器请求失败！");
        });
    },
    /* back() {
      this.isSend = false;
      this.$bus.$emit("back");
    }, */
  },
  beforeCreate() {
    clearInterval(this.myInterval);
  },
};
</script>
<style scoped>
.forgetForm {
  background-color: #fff;
  width: 20%;
  padding: 50px 30px;
  position: relative;
  top: 10%;
  background-color: #ffffffb9;
  border-radius: 20px;
  box-shadow: 0 0 3px #f0f0f0, 0 0 6px #f0f0f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.btitle {
  font-size: 1.5em;
  font-weight: bold;
  color: #343434;
  letter-spacing: 3px;
  margin-bottom: 1em;
}
.forgetForm >>> .el-input input {
  height: 35px;
  width: 100%;
  border-radius: 10px;
}

.forgetForm >>> .captcha input {
  height: 35px;
  width: 60%;
  border-radius: 10px;
}

.forgetForm >>> .el-button {
  width: 50%;
  height: 40px;
  border-radius: 24px;
  border: none;
  outline: none;
  background-color: #39a7b0;
  color: #fff;
  font-size: 1em;
  /* cursor: pointer; */
}
.forgetForm >>> .send {
  position: absolute;
  right: -2%;
  top: 5%;
  width: 40%;
  height: 35px;
  border-radius: 10px;
  font-size: 1em;
  text-align: center;
}
.forgetForm >>> .back {
  position: absolute;
  right: -2%;
  width: 40%;
  background-color: #909090;
  color: #fff;
}
.forgetForm >>> .verify {
  position: absolute;
  width: 50%;
  background-color: #39a7b0;
  color: #fff;
}
</style>
